<template>
    <el-menu-item :index="itemOrMenu.path" @click="handleLink">
        <!--图标-->
        <el-image v-if="itemOrMenu.meta.iconDefault" class="menu-icon-left default"
                  :src="iconSrc(itemOrMenu.meta.iconDefault)"><i slot="error"/>
        </el-image>
        <el-image v-if="itemOrMenu.meta.iconActive" class="menu-icon-left active"
                  :src="iconSrc(itemOrMenu.meta.iconActive)"><i slot="error"/>
        </el-image>
        <el-image v-if="itemOrMenu.meta.iconDefault && !itemOrMenu.meta.iconActive" class="menu-icon-left active"
                  :src="iconSrc(itemOrMenu.meta.iconDefault)"><i slot="error"/>
        </el-image>
        <vab-icon class="menu-icon-left"
                  v-if="itemOrMenu.meta.iconFont"
                  :icon="itemOrMenu.meta.iconFont"
                  :is-custom-svg="itemOrMenu.meta.isCustomSvg"
                  :title="translate(itemOrMenu.meta.title)"/>

        <!--菜单名称-->
        <span :title="translate(itemOrMenu.meta.nameI18nKey || itemOrMenu.meta.title)">
				{{ translate(itemOrMenu.meta.nameI18nKey || itemOrMenu.meta.title ) }}
			</span>
        <el-tag v-if="itemOrMenu.meta && itemOrMenu.meta.badge"
                effect="dark"
                type="danger">
            {{ itemOrMenu.meta.badge }}
        </el-tag>
        <span v-if="itemOrMenu.meta && itemOrMenu.meta.dot" class="vab-dot vab-dot-error"><span/>
    </span>
    </el-menu-item>
</template>

<script lang="ts">
import {isExternal} from '@/utils/validate'
import {baseURL} from '@/config'
import {Component, Prop} from 'vue-property-decorator';
import BaseVue from "@/common/base-vue";
import {SettingsGetterEnum} from '@/store/enum/store.enum'
import {ICON_API} from "@/layout/const/menu.const";

@Component({components: {}})
export default class MenuItem extends BaseVue {
    @Prop({type: Object})
    private itemOrMenu;

    /**
     * 获取设备类型
     */
    get device() {
        return this.$store.getters[SettingsGetterEnum.device]
    };

    /**
     *加载图片的远程地址
     */
    get iconSrc() {
        return (key: string) => {
            return baseURL + ICON_API + key;
        }
    }

    private foldSideBar() {
        this.$store.commit('settings/foldSideBar');
    };

    private handleLink() {
        const routePath = this.itemOrMenu.path;
        const target = this.itemOrMenu.meta.target;
        if (target === '_blank') {
            if (isExternal(routePath)) {
                window.open(routePath);
            } else if (this.$route.fullPath !== routePath) {
                window.open(routePath.href);
            }
        } else {
            if (isExternal(routePath)) {
                window.location.href = routePath;
            } else if (this.$route.fullPath !== routePath) {
                if (this.device === 'mobile') {
                    this.foldSideBar();
                }
                this.$router.push(routePath);
            }
        }
    };
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-tag {
        float: right;
        height: 16px;
        padding-right: 4px;
        padding-left: 4px;
        margin-top: ($base-menu-item-height - 16) / 2;
        line-height: 16px;
        border: 0;
    }
}

.vab-dot {
    float: right;
    margin-top: ($base-menu-item-height - 6) / 2 + 1;
}

</style>
